<template>
	<view class="record-page">
		<view class="head-search-box">
			<img src="./static/left.svg" alt="" style="height: 24px; width: 24px; margin-right: 10px;" @click="goback()"/>
			<view class="search-wrap uni-flex uni-row">
				<view class="flex-item input-wrap">
					<input class="uni-input" maxlength="50" v-model="params.name" confirm-type="search" @confirm="search()" placeholder="请输入姓名工号" />
					<text class="iconfont icon-sousuo" @click.stop="search()"></text>
				</view>
			</view>
			<view class="filter-box" @click="filter()">
				<view class="name">筛选</view>
				<text class="iconfont icon-shaixuan"></text>
			</view>
		</view>
		<re-mescroll top="130" ref="mescroll" @getData="getDataList">
			<block slot="list">
				<view class="list-content" v-if="dataList.length > 0">
					<!-- <view class="data-list"> -->
					<view class="item" v-for="(item, index) in dataList" :key="index">
						<view class="work-num">{{ item.person_idcard_code }}</view>
						<view class="name-dep-type">
							<view class="user-info">
								<view hover-class="hover">
									<image class="avatar" @click="previewImage(item.image_path)" :src="item.image_path" mode="aspectFill" @error="imgError(index)"></image>
								</view>
								<view class="left-b">
									<view class="name">{{ item.person_name }}</view>
									<view class="department">{{ item.dep_name }}</view>
								</view>
							</view>
							<view class="work-type">{{ item.work_type_name }}</view>
						</view>
						<view class="date-action">
							<view class="date">{{ item.record_time }}</view>
							<view class="action" :class="{ out: item.comm_type == '出' }">{{ item.comm_type }}</view>
						</view>
					</view>
					<!-- </view> -->
				</view>
				<view v-else>
					<ns-empty text="暂无数据" :isIndex="!1"></ns-empty>
				</view>
			</block>
		</re-mescroll>
		<uni-popup ref="uniPopup" type="right">
			<view class="filter-popup">
				<view class="module">
					<view class="title">工种</view>
					<picker @change="workTypeChange" range-key="data_name" :range="workType">
						<view class="uni-input">{{ params.work_type_name || '请选择工种' }}</view>
					</picker>
				</view>
				<view class="module">
					<view class="title">部门</view>
					<picker @change="departmentsChange" range-key="dep_name" :range="departments">
						<view class="uni-input">{{ params.dep_name || '请选择部门' }}</view>
					</picker>
				</view>
				<view class="module">
					<view class="title">进出</view>
					<view class="m-box">
						<view class="m-it" :class="{ 'm-active': it == params.comm_type }" v-for="(it, idx) in actionList" :key="idx" @click="selectAction(it)">{{ it }}</view>
					</view>
				</view>
				<view class="module">
					<view class="title">日期</view>
					<picker mode="date" :value="params.start_date" @change="startDateChange" style="margin-bottom: 20rpx">
						<view class="uni-input">{{ params.start_date || '请选择开始日期' }}</view>
					</picker>
					<picker mode="date" :value="params.end_date" @change="endDateChange">
						<view class="uni-input">{{ params.end_date || '请选择结束日期' }}</view>
					</picker>
				</view>
				<view class="footer-btn">
					<view class="reset btn" @click="reset()">重置</view>
					<view class="confirm btn" @click="filterSubmit()">确定</view>
				</view>
			</view>
		</uni-popup>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
import loadingCover from '@/components/loading-cover/loading-cover.vue';
import uniPopup from './componentCopy/uni-popup/uni-popup.vue'
import nsEmpty from './componentCopy/ns-empty/ns-empty.vue'
import reMescroll from './componentCopy/mescroll/my-list-mescroll.vue'
import util from '@/common/accessRecords/util.js';
import http from '@/common/accessRecords/http.js';
export default {
	components: { uniPopup,loadingCover,reMescroll,nsEmpty },
	data() {
		return {
			workType: [],
			departments: [],
			actionList: ['全部', '进', '出'],
			params: {
				name: '',
				dep_name: '',
				work_type_name: '',
				start_date: '',
				end_date: '',
				comm_type: '',
				page_index: 1,
				page_size: 10,
			},
			dataList: [],
		};
	},
	onLoad() {
		if (!uni.getStorageSync('kqToken')) {
			return util.redirectTo('/pages/login/login', {}, 'redirectTo');
		}
		this.getWorkType();
		this.getDepartment();
	},
	methods: {
		previewImage(url = '') {
			uni.previewImage({
				urls: [url],
			});
		},
		workTypeChange(e) {
			let index = e.detail.value;
			this.params.work_type_name = this.workType[index].data_name;
		},
		departmentsChange(e) {
			let index = e.detail.value;
			this.params.dep_name = this.departments[index].dep_name;
		},
		selectAction(val) {
			this.params.comm_type = val;
		},
		startDateChange(e) {
			this.params.start_date = e.detail.value;
		},
		endDateChange(e) {
			this.params.end_date = e.detail.value;
		},
		// 筛选确定按钮
		filterSubmit() {
			this.$refs.mescroll.refresh();
			this.$refs.uniPopup.close();
		},
		reset() {
			this.params = {
				name: '',
				dep_name: '',
				work_type_name: '',
				start_date: '',
				end_date: '',
				comm_type: '',
				page_index: 1,
				page_size: 10,
			};
		},
		// popupChange(e){
		// 	if(!e.show){
		// 		this.reset()
		// 	}
		// },
		getDataList(mescroll) {
			// mescroll.endSuccess(0);
			// if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
			// return
			this.params.page_index = mescroll.num;
			this.params.page_size = mescroll.size;
			if (this.params.comm_type == '全部') this.params.comm_type = '';

			http.sendRequest({
				url: '/api/user/inoutrecord/v1/list',
				data: this.params,
				success: (res) => {
					let newArr = [];
					if (res.statusCode == 200) {
						newArr = res.data.items;
					} else {
						util.showToast({
							title: res.errors,
						});
					}
					mescroll.endSuccess(newArr.length);
					//设置列表数据
					if (mescroll.num == 1) this.dataList = []; //如果是第一页需手动制空列表
					this.dataList = this.dataList.concat(newArr); //追加新数据
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				},
				fail: (err) => {
					mescroll.endErr();
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				},
			});
		},
		imgError(index) {
			this.dataList[index].image_path = require('@/static/head.png');
		},
		// 搜索姓名工号
		search() {
			this.$refs.mescroll.refresh();
		},
		// 点击筛选
		filter() {
			this.$refs.uniPopup.open();
		},
		// 获取工种下拉
		getWorkType() {
			http.sendRequest({
				url: '/api/manager/config/v1/datadictionary/get',
				data: { data_type: 3 },
				success: (res) => {
					if (res.statusCode == 200) {
						this.workType = res.data;
					}
				},
			});
		},
		// 获取部门下拉
		getDepartment() {
			http.sendRequest({
				url: '/api/manager/department/v1/list',
				success: (res) => {
					if (res.statusCode == 200) {
						this.departments = res.data;
					}
				},
			});
		},
		goback(){
			uni.navigateTo({
				url:'/pages/index/index'
			})
		}
	},
};
</script>

<style lang="scss">
@import 'record.scss';
</style>
